<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
	    <view class="layout-form" v-model="FormData">
			<view class="layout-form-item" >
				<view class="form-label">问题: </view>
				<view class="form-type">
					<input  class="uni-input " v-model="FormData.name"/>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">检查人: </view>
				<view class="form-type">
					<input  class="uni-input "  v-model="FormData.code" auto-height disabled="true"/>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">车间: </view>
				<view class="form-type">
					<input  class="uni-input "  v-model="FormData.code" auto-height disabled="true"/>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">检查区域: </view>
				<view class="form-type">
					<input  class="uni-input "  v-model="FormData.code" auto-height/>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">检查时间: </view>
				<view class="form-type">
					<view class="example-body">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
					</view>
				</view>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">问题描述: </view>
				<textarea  class="form-type-text" v-model="FormData.pass" auto-height/>
			</view>
			<view class="layout-form-item" >
				<view class="form-label">图片上传: </view>
					<view class="example-body">
						<uni-file-picker class="form-up-file" :file-mediatype="mediaType" ></uni-file-picker>
					</view>
			</view>
			<view class="layout-form-btn" >
				<button class="mini-btn" type="primary" @click="clickInter">提交</button>
			</view>
		</view>
		<!-- <view class="uni-tag">
			<uni-row class="uni-row">
				<uni-col class="uni-col-list" :span="6">
					<uni-tag class="uni-tag-list" title="全部问题"/>
					<uni-tag text="标签" type="warning" />
				</uni-col>
			</uni-row>
		</view> -->
		<view class="bot-window-header">
		        <custom-tab-bar class="tab-bar-flex" direction="horizontal" :show-icon="false" :selected="current"
		          @onTabItemTap="toSecondMenu" />
		    </view>
	</view>
</template>

<script>
	import { post } from '../../utils/request.js';
	export default {
		data() {
			return {
				title: '',
				FormData: {
					name: '',
					code: '',
					pass: ''
				},
				single:  new Date(),
				mediaType:['image', 'audio'],
				selectTab: 0,
				selected: {
					'点检问题': 0
				}
			}
		},
		onLoad() {

		},
		methods: {
			clickInter(){
				
			},
			toSecondMenu(e) {
				console.log(e, 'ww')
			console.log(e.pagePath, 'ww')
			/* let path = e.pagePath
				uni.switchTab({
					url: path
				}); */
			},
		    change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
						},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			maskClick(e){
				console.log('maskClick事件:', e);
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.bot-window-header {
	  height: 60px;
	  padding: 0 15px;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  box-sizing: border-box;
	  border-bottom: 1px solid #e1e1e1;
	  background-color: #FFFFFF;
	}
	.tab-bar-flex {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  height: 50px;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  background-color: #fff;
	  border-top: 1px solid #ddd;
	}
	.tab-bar-text {
	  font-size: 24px;
	  color: #333;
	}
	.uni-tabbar {
	  flex: 1;
	  text-align: center;
	  margin-left: 20px;
	  width: 25%;
	}
	.uni-tabbar {
		width: 100%;
	}
	.uni-tabbar .uni-tabbar__item {
	    -webkit-flex-direction: column;
	    flex-direction: column;
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    margin-right: 20px;
	    flex: 1;
	    font-size: 0;
	    text-align: center;
	    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}
	.text-area{
		margin-top: 100px;
	}
	.layout-form {
		padding: 0 10px;
		margin-top: 30px;
		text-align: center;
		}
		.layout-form-item {
			padding: 30px 0;
			line-height: 37px;
			display: flex;	
		}
		.form-label {
			width: 20%;
			line-height: 35px;
			text-align: right;
			//font-size: 14px;
			color: #000;
			margin-right: 5px;
		}
		.form-type {
			//font-size: 12px;
			width: 80%;
		   line-height: 35px;
		}
		.form-type-input {
			text-align: left;
		    line-height: 35px;
			font-size: 12px;
		}
		.uni-tag {
			text-align: center;
			width: 100%;
			line-height: 37px;
			margin-top: 30px;
			height: 35px;
			
		}
		.uni-row {
			height: 35px;
			text-align: center;
		}
		.uni-col-list {
			height: 35px;
			text-align: center;
		}
	.uni-input{
		position: relative;
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
			text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
		text-align: left;
		/* border: 2px; */
		border: 1px solid #999 !important;
		/* margin: 3px; */
	}
	.form-type-text {
		text-align: left;
		border: 1px solid #999 !important;
		line-height: 35px;
		border-radius: 5px;
		color: rgba(0, 0, 0, 0.6);
		/* margin: 3px; */
	}
	.layout-form-btn {
		text-align: center;
	}	
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
		}
	.text-area {
		display: flex;
		justify-content: center;
	}
	.uni-btn{
		margin-top: 20px;
		text-align: center;
		width: 100%;
	}
	.mini-btn{
		display: inline;
		width: 50%;
	}
	.form-up-file {
		margin-left: 10px;
	}
	.uni-left{
		text-align: center;
		width: 50%;
		display: inline-block;
	}
	.uni-right{
		text-align: center;
		width: 50%;
		display: inline-block;
	}
	.example-body {
		background-color: #fff;
    }
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
